<template>
  <div class="DeptInfo">
    <div class="title">
      <i class="el-icon-message-solid"></i>人员架构
    </div>
    <div class="total">
      <i class="el-icon-s-custom"></i>
      <span>{{totalNum-2}}</span>
    </div>
    <div class="content">
      <ve-bar
        :data="chartData"
        :settings="chartSettings"
        :extend="extend"
        :legend-visible="false"
        :height="height"
        :width="width"
      ></ve-bar>
    </div>
  </div>
</template>
<script>
import { DeptInfo } from "@/api/dashboard";
import veBar from "v-charts/lib/bar.common";
export default {
  components: {
    veBar,
  },
  props: {
    width: {
      type: String,
      default: "100%",
    },
    height: {
      type: String,
      default: "450px",
    },
  },
  data() {
    const that = this;
    return {
      chartData: {
        columns: ["deptName", "total"],
        rows: [],
      },
      totalNum: 0,
      extend: {
        series: {
          barMaxWidth: 30,
          label: {
            show: true,
            position: "right",
            color: "#000",
          },
        },
        grid: [
          {
            bottom: "5%",
            top: "30px",
            right: "20px",
          },
        ],
        color: {
          x: 0,
          y: 1,
          colorStops: [
            {
              offset: 0,
              color: "#00bcd4", // 0% 处的颜色
            },
            {
              offset: 1,
              color: "#2196f3", // 100% 处的颜色
            },
          ],
          globalCoord: false, // 缺省为 false
        },
        tooltip: {
          trigger: "axis",
          formatter: function (params, ticket, callback) {
            var htmlStr = "";
            for (var i = 0; i < params.length; i++) {
              var param = params[i];
              var value = param.value; //y轴值
              var color = param.color; //图例颜色
              htmlStr += htmlStrColor(color) + "总数:" + value + "<br/>"; //x轴的名称
            }
            var indx = 0;
            for (var i in that.chartData.rows[param.dataIndex]) {
              let item = that.chartData.rows[param.dataIndex][i];
              if (that.stack.indexOf(i) !== -1 && item !== 0) {
                htmlStr += htmlStrColor(indx++) + i + ":" + item + "<br/>";
              }
            }
            return htmlStr;
          },
        },
      },
      chartSettings: {
        labelMap: {
          deptNum: "人数",
        },
        stack: { 用户: [] },
      },
    };
  },
  created() {
    this.getDeptInfo();
  },
  methods: {
    getDeptInfo() {
      DeptInfo().then((res) => {
        this.clickSwitch(res.data.data.deptInfo);
        this.totalNum = res.data.data.totalNum;
      });
    },
    clickSwitch(row) {
      const data = row.sort(this.sortData);
      const rows = [];
      let stack = [];
      const map = {};
      data.forEach((item) => {
        if (item.deptId !== 1) {
          let obj = {};
          if (item.deptId >= 100) {
            this.dataFilter(data, item.deptId, obj, stack, map);
          }
          if (!map[item.deptParentId + "+" + item.deptId]) {
            obj.deptName = item.deptName;
            if (obj.deptName === "系统部") {
              obj.deptNum = item.deptNum - 2;
            } else {
              obj.deptNum = item.deptNum;
            }
            obj.total = 0;
            for (var i in obj) {
              if (["deptName", "total", "deptId"].indexOf(i) === -1) {
                obj.total = obj.total + obj[i];
              }
            }

            rows.push(obj);
          }
        }
      });
      rows.sort(this.sortTotal);
      this.stack = stack;
      this.chartData.rows = rows;
    },
    sortData(a, b) {
      return b.deptParentId < a.deptParentId ? 1 : -1;
    },
    sortTotal(a, b) {
      return b.total < a.total ? 1 : -1;
    },
    dataFilter(data, deptId, obj, stack, map) {
      data.forEach((findItem) => {
        if (deptId === findItem.deptParentId) {
          obj[findItem.deptName] = findItem.deptNum;
          if (stack.indexOf(findItem.deptName) === -1) {
            stack.push(findItem.deptName);
          }
          map[findItem.deptParentId + "+" + findItem.deptId] = deptId;
          this.dataFilter(data, findItem.deptId, obj, stack, map);
        }
      });
    },
  },
};
function htmlStrColor(key) {
  key++;
  let color = "";
  switch (key) {
    case 0:
      color = "#ff5722";
    case 1:
      color = "#2196f3";
      break;
    case 2:
      color = "#e91e63";
      break;
    case 3:
      color = "#9c27b0";
      break;
    case 4:
      color = "#3f51b5";
      break;
    case 5:
      color = "#2196f3";
      break;
    case 6:
      color = "#cddc39";
      break;
    case 7:
      color = "#607d8b";
      break;
    default:
      color = "#00bcd4";
      break;
  }
  return (
    '<span style="margin-right:5px;display:inline-block;width:10px;height:10px;border-radius:5px;background-color:' +
    color +
    ';"></span>'
  );
}
</script>
<style lang="scss" scoped>
.DeptInfo {
  position: relative;
  .title {
    position: absolute;
    left: 10px;
    font-size: 16px;
    color: #333333;
    i {
      color: #409eff;
    }
  }
  .total {
    position: absolute;
    right: 10px;
    text-align: center;
    font-size: 16px;
    color: #333333;
    span {
      color: #409eff;
    }
  }
}
</style>